/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component, Fragment} from 'react';
import {Form, Input, Radio, Select, Checkbox, TreeSelect, Button, message, Modal, Alert} from 'antd';
import {connect} from 'dva';
import request from '@/utils/request';
import {afterCloseModal, renderSignalIntensity, renderTreeNodes, renderValveOpen} from '@/utils/utils';
import ReactDataGrid from "react-data-grid";
import Loading from "@/components/Loading";
import find from "lodash/find";
import MyPagination from "@/components/MyPagination";
import BuildModalTitle from "@/components/BuildModalTitle";
import EditDMA from "@/pages/Meters/JoinDMA";
import ValveData from "@/pages/ValveFlowMeterSIte/ValveData";
import ValveData2 from "@/pages/ValveFlowMeterSIte/ValveData2";
import ValveData3 from "@/pages/ValveFlowMeterSIte/ValveData3";
import ValveData4 from "@/pages/ValveFlowMeterSIte/ValveData4";
import ValveData5 from "@/pages/ValveFlowMeterSIte/ValveData5";
import ValveData6 from "@/pages/ValveFlowMeterSIte/ValveData6";
import ValveData8 from "@/pages/ValveFlowMeterSIte/ValveData8";
import ValveData9 from "@/pages/ValveFlowMeterSIte/ValveData9";
import ValveData35 from "@/pages/ValveFlowMeterSIte/ValveData35";
import ValveData36 from "@/pages/ValveFlowMeterSIte/ValveData36";
import ValveData10 from "@/pages/ValveFlowMeterSIte/ValveData10";
import ValveData11 from "@/pages/ValveFlowMeterSIte/ValveData11";
import ValveData12 from "@/pages/ValveFlowMeterSIte/ValveData12";
import ValveData23 from "@/pages/ValveFlowMeterSIte/ValveData23";
import ValveData19 from "@/pages/ValveFlowMeterSIte/ValveData19";
import ValveData13 from "@/pages/ValveFlowMeterSIte/ValveData13";
import ValveData14 from "@/pages/ValveFlowMeterSIte/ValveData14";
import ValveData15 from "@/pages/ValveFlowMeterSIte/ValveData15";
import ValveData16 from "@/pages/ValveFlowMeterSIte/ValveData16";
import ValveData20 from "@/pages/ValveFlowMeterSIte/ValveData20";
import ValveData21 from "@/pages/ValveFlowMeterSIte/ValveData21";
import ValveData24 from "@/pages/ValveFlowMeterSIte/ValveData24";
import ValveData25 from "@/pages/ValveFlowMeterSIte/ValveData25";
import ValveData27 from "@/pages/ValveFlowMeterSIte/ValveData27";
import ValveData26 from "@/pages/ValveFlowMeterSIte/ValveData26";
import ValveData29 from "@/pages/ValveFlowMeterSIte/ValveData29";
import ValveData40 from "@/pages/ValveFlowMeterSIte/ValveData40";

const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[],
      editRecord:{},
      meta: {total: 0, per_page: 30,current_page:1},
      searchParams:{
        number:'',
        user_number:'',
        communication_type:'',
        status:'1',
        caliber:'',
        address:'',
        imei:'',
        page: 1,
        per_page: 50,
      },
      all_vendors: [],
      selectedRowKeys: [],
      loading:false
    };
  }

  componentDidMount() {
    this.handleSearch(this.state.searchParams);
    const that = this;

  }
  handleSearch=(values)=>{
    const that=this
    this.setState({
      loading:true
    })
    request(`/workstations`, {
      method: 'GET',
      params:{
        ...values
      }
    }).then((response)=> {
      if(response.status===200){
        that.setState({
          data: response.data.data,
          meta:response.data.meta,
          loading:false,
          searchParams:values
        })
      }
    })
  }
  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const that=this
    const searchParams =this.state.searchParams;
    return (
      <Form layout="inline" className="search-form">
        <FormItem  style={{paddingLeft:'6px'}} >
          {getFieldDecorator('area', {
            initialValue: searchParams.area,
          })(
            <Radio.Group buttonStyle="solid"
                         onChange={(e) => {
                           const that=this
                           const {
                             searchParams
                           } = that.state;
                             that.handleSearch({
                             page: 1,
                             ...searchParams,
                             area:e.target.value
                           });
                         }
            }
            >
              <Radio.Button value="">全部地区</Radio.Button>
              <Radio.Button value="老城区">老城区</Radio.Button>
              <Radio.Button value="港城区">港城区</Radio.Button>
              <Radio.Button value="示范区">示范区</Radio.Button>
              <Radio.Button value="塔尔郎水厂">塔尔郎水厂</Radio.Button>
              <Radio.Button value="七泉湖水厂">七泉湖水厂</Radio.Button>
              <Radio.Button value="示范区水厂">示范区水厂</Radio.Button>
              <Radio.Button value="园艺场沉砂池">园艺场沉砂池</Radio.Button>
            </Radio.Group>
          )}
        </FormItem>
        <br/>
        <FormItem label="站点名称" style={{paddingLeft:'10px'}}>
          {getFieldDecorator('name', {
            initialValue: searchParams.name,
          })(<Input style={{ width: '150px' }} placeholder="请输入" onKeyPress={this.keyPress}/>)}
        </FormItem>

        <FormItem>
          <Button
            type="primary"
            icon='search'
            onClick={() => {
              const { form } = this.props;
              form.validateFields((err, fieldsValue) => {
                if (err) return;

                this.handleSearch({
                  page: 1,
                  per_page: searchParams.per_page,
                  template: searchParams.template,
                  ...fieldsValue,
                });

              });
            }}
          >
            查询
          </Button>
          <Button style={{ marginLeft: 8 }} icon='redo' onClick={this.handleFormReset}>
            重置
          </Button>
        </FormItem>
      </Form>
    );
  }
  handleFormReset = () => {
    const { form } = this.props;
    const username=sessionStorage.getItem('username')
    form.resetFields();
    this.handleSearch({
      number: '',
      user_number: '',
      caliber:'',
      address: '',
      communication_type:'',
      status:'1',
      page: 1,
      per_page: 50,
    });
  };
  handleAddDMA=(item,status)=>{
    const that=this
    request(`/workstations/${item.id}/join_area`, {
      method: 'PUT',
      data: {
        join_area:status,
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success(status===-1?'加入DMA系统成功':'从DMA系统内删除成功')
        that.setState({
          editDMAModal:false
        })
        const {
          searchParams
        } = that.state;
        that.handleSearch(searchParams);
      }
    });
  }
  render() {
    const {data,loading,selectedRowKeys,searchParams,meta}=this.state
    const defaultColumnProperties = {
      resizable: true,
    };
    const columns = [
      {
        name: '序号',
        width: 50,
        key: '_index',
        frozen:true,
        formatter: (event) => {
          const { meta }= this.state;
          return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
        },

      },
      {
        name: '名称',
        width: 200,
        frozen:true,
        key: 'name',

      },
      {
        name: '安装地址',
        frozen:true,
        key: 'address',
        width: 200    ,
      },
      {
        name: '站点类型',
        width: 200,
        frozen:true,
        key: 'template',
        formatter: (event) => {
          let template = '未知';
          let item=event.row;
          if (item.template === 1) {
            template = '双蝶阀站点';
          } else if (item.template === 2) {
            template = '流量计站点';
          } else if (item.template === 3) {
            template = '水质检测站点';
          } else if (item.template === 4) {
            template = '电磁计量器站点';
          } else if (item.template === 5) {
            template = 'DN800电磁流量计(SNLD-DN800)';
          } else if (item.template === 6) {
            template = 'DN800电磁流量计(未知)';
          } else if (item.template === 7) {
            template = 'LDE-DN400-400(珠华)';
          } else if (item.template === 8) {
            template = 'JEER雷达水位计';
          } else if (item.template === 9) {
            template = '双阀减压阀站点';
          } else if (item.template === 10) {
            template = '宋峰流量计';
          } else if (item.template === 11) {
            template = '电磁流量计&压力计';
          } else if (item.template === 12) {
            template = '双压力监测点';
          } else if (item.template === 19) {
            template = '双压力监测点(双阀调流阀)';
          }else if (item.template === 13) {
            template = '阀井液位站点';
          }else if (item.template === 14) {
            template = '园艺场沉砂池-水质液位';
          }else if (item.template === 15) {
            template = '老城区水厂-出水流量';
          }else if (item.template === 16) {
            template = '单液位站点-通道1';
          }else if (item.template === 17) {
            template = '老城区水厂-2#液位';
          }else if (item.template === 18) {
            template = '示范区水厂-液位';
          }else if (item.template === 20) {
            template = '单液位站点-通道2';
          }else if (item.template === 21) {
            template = '单压力监测点(带球阀)';
          }else if (item.template === 22) {
            template = '双压力监测点(量程0~8米)';
          }else if (item.template === 23) {
            template = '双压力液位监测点';
          }
          return <span title={template}  >{template}</span>
        }
      },
      {
        name: '是否在DMA系统内',
        key: 'join_area',
        frozen:true,
        width: 140,
        formatter: (event) => {
          return event.row.join_area===1?<p className="table-success table-status">存在</p>:<p className="table-error table-status">不存在</p>

        },
      },
      {
        name: '操作',
        width: 380,
        key: 'right',
        classname: 'operate',
        formatter: (event) => <Fragment>
          <Button
            className={'btn-cyan'}
            type="primary"
            icon="eye"
            size="small"
            onClick={() => {
              this.setState({
                editRecord: event.row,
                dataModal: true,
                name: event.row.name,
              });
            }}
          >详情
          </Button>
          {
            event.row.join_area===-1?
              <Button
                type="primary"
                icon="plus"
                size="small"
                onClick={(e) => {
                  this.handleAddDMA(event.row,1);
                }
                }
              >加入DMA系统
              </Button>:
              <Fragment>
                <Button
                  type="danger"
                  icon="delete"
                  size="small"
                  onClick={(e) => {
                    this.handleAddDMA(event.row,-1);
                  }
                  }
                >从DMA系统内删除
                </Button>
                <Button
                  icon="refresh"
                  size="small"
                  onClick={(e) => {
                    request(`/workstations/${event.row.id}/init_vertex_data`, {
                      method: 'POST',
                    }).then((response) => {
                      if (response.status === 200) {
                        message.success('刷新数据成功')
                      }

                    });
                  }}
                >刷新DMA数据
                </Button>
              </Fragment>

          }




        </Fragment>,
      },
    ].map(c => ({ ...defaultColumnProperties, ...c }));
    return (
      <div>
        <div>{this.renderSimpleForm()}</div>
        <div className={'table-data-content'}>
          <ReactDataGrid
            columns={columns}
            rowGetter={i => {
              return { ...data[i], _index: i };
            }}
            rowsCount={data.length}
            minHeight={600}
            rowSelection={{
              showCheckbox: false,
              enableShiftSelect: true,
              selectBy: {
                indexes: selectedRowKeys,
              },
            }}
            onRowClick={
              (index,row) => {
                if (!row) {
                  return;
                }
                this.setState({
                  selectedRowKeys:[index]
                })
              }
            }

          />
          {
            loading && <Loading/>
          }
          <div className="custom-card">
            <div className="table-pagination">
              <MyPagination searchCondition={{ ...searchParams }}
                            resetScrollY={() => {
                            }}
                            meta={meta} handleSearch={this.handleSearch}/>
            </div>
          </div>

        </div>
        <Modal
          title={<BuildModalTitle visible={this.state.editDMAModal} modalClass="editDMAModal"
                                  title={`水表 ${this.state.editRecord.number} DMA统计设置`}/>}
          visible={this.state.editDMAModal}
          destroyOnClose
          centered
          onOk={this.handleAddDMA}
          className="editDMAModal"
          onCancel={() => {
            this.setState({ editDMAModal: false });
          }}

        >
          <EditDMA type={"meter"} editRecord={this.state.editRecord} wrappedComponentRef={(inst) => this.editDMAFormRef = inst}/>
        </Modal>
        <Modal
          title={<BuildModalTitle visible={this.state.dataModal} modalClass="dataModal"
                                  title={`${this.state.editRecord.name} 详情`}/>}
          destroyOnClose
          onCancel={() => {
            this.setState({
              dataModal: false,
              editRecord: {},
            });
          }}
          width={1100}
          centered
          className="dataModal"
          afterClose={() => {
            afterCloseModal(); // destroyOnClose需要
          }}
          visible={this.state.dataModal}
          footer={null}
        >
          {
            this.state.editRecord.online_status === -1 &&
            <Alert message="站点设备当前离线" type="error"/>
          }

          {
            this.state.editRecord &&
            this.state.editRecord.template === 1 &&
            <ValveData
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 2 &&
            <ValveData2
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 3 &&
            <ValveData3
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 4 &&
            <ValveData4
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 5 &&
            <ValveData5
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 6 &&
            <ValveData6
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 7 &&
            <ValveData5
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 8 &&
            <ValveData8
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 9 &&
            <ValveData9
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 35 &&
            <ValveData35
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 36 &&
            <ValveData36
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 10 &&
            <ValveData10
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 11 &&
            <ValveData11
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 12 &&
            <ValveData12
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 22 &&
            <ValveData12
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 23 &&
            <ValveData23
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 19 &&
            <ValveData19
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 13 &&
            <ValveData13
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 14 &&
            <ValveData14
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            this.state.editRecord.template === 15 &&
            <ValveData15
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 16||this.state.editRecord.template === 17||this.state.editRecord.template === 18) &&
            <ValveData16
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 20) &&
            <ValveData20
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 21) &&
            <ValveData21
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 24) &&
            <ValveData24
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 25) &&
            <ValveData25
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 27) &&
            <ValveData27
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 26) &&
            <ValveData26
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 29) &&
            <ValveData29
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
          {
            this.state.editRecord &&
            (this.state.editRecord.template === 40) &&
            <ValveData40
              editRecord={this.state.editRecord}
              name={this.state.name}        downloadHistory={this.downloadHistory}
              wrappedComponentRef={(inst) => this.dataForm = inst}
            />
          }
        </Modal>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


